<script lang="ts" setup>
import Plate from "./Plate.vue";
import ProTable from "@/components/ProTable/ProTable.vue";

import { ref, computed, onBeforeMount } from "vue";
import { get } from "@/api/http";

const formatUnit = (e) => {
  if (!e) return "暂无数据";
  const i = e.indexOf("（");
  return e.slice(0, i);
};

const columns = [
  {
    label: "场馆名称",
    prop: "venueName",
    // width: 180,
  },
  {
    label: "所属区域",
    prop: "region",
    // width: 180,
  },
  {
    label: "总建筑面积",
    prop: "area",
  },
  {
    label: "观众席位",
    prop: "seatNum",
    format: (e) => e || "暂无数据",
  },
  // {
  //   label: "场地属性",
  //   prop: "siteAttribute",
  // },
  {
    label: "设防等级",
    prop: "basicIntensity",
    format: (e) => {
      if (!e) return "暂无数据";
      const i = e.indexOf("（");
      return e.slice(0, i);
    },
  },
  // {
  //   label: "场馆设防烈度",
  //   prop: "venueIntensity",
  // },
];
const tableData = ref(
  [] ||
    Array(20).fill({
      id: "1",
      venueName: "杭州体育馆",
      lon: 30.27061,
      lat: 120.17292,
      region: "杭州市拱墅区天水街道",
      area: "34202",
      seatNum: "4300",
      siteAttribute: "室内健身场地",
      basicIntensity: "VII",
      venueIntensity: null,
    })
);

onBeforeMount(async () => {
  const { data } = await get("/venue/getList");
  tableData.value = data;
  // console.log(data);
});

const top = ref(0);
const topY = computed(() => top.value + "px");
const timer = setInterval(() => {
  top.value--;
  if (top.value <= -160) {
    top.value = 0;
    // inner.value.style
    // clearInterval(timer);
  }
}, 100);
</script>

<template>
  <Plate title="场馆信息">
    <div class="p-l-30px flex items-center h-30px">
      <span class="flex-1 text-center">场馆名称</span>
      <span class="flex-1 text-center">总建筑面积</span>
      <span class="flex-1 text-center">观众席位</span>
      <span class="flex-1 text-center">设防等级</span>
    </div>
    <div class="warper p-l-30px">
      <div class="inner" v-for="(item, index) in tableData" :key="index">
        <li class="flex w-full">
          <span class="flex-1 text-center flex-center">{{
            item.venueName || "暂无数据"
          }}</span>
          <span class="flex-1 text-center flex-center">{{
            item.area || "暂无数据"
          }}</span>
          <span class="flex-1 text-center flex-center">{{
            item.seatNum || "暂无数据"
          }}</span>
          <span class="flex-1 text-center flex-center">{{
            formatUnit(item.basicIntensity) || "暂无数据"
          }}</span>
        </li>
      </div>
    </div>
    <!-- <ProTable
      :scroll="{ x: 500, y: 130 }"
      :data="tableData"
      :columns="columns"
    ></ProTable> -->
  </Plate>
</template>

<style lang="less" scoped>
.warper {
  height: 160px;
  overflow: hidden;
  position: relative;
  // transform: translateY(v-bind(topY));
  // position: absolute;
  width: 100%;
  .inner {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    transform: translateY(v-bind(topY));
    &:nth-child(odd) {
      background-color: rgba(12, 104, 168, 0.1);
    }
  }
}
</style>
